<template>
  <div class="home-admin">
    <!-- 首页管理页面 -->
    <h3 class="title">首页推荐管理</h3>

    <el-card class="box-card" style="margin: 0 auto">
      <el-form :model="adminForm" label-width="20px" class="demo-adminForm">
        <!-- 
            for 遍历失败
            <el-form-item v-for="(item,index) in listdata" :key="item.id" :label="index+1">
              <el-input type="text" v-model="adminForm.name" autocomplete="off"></el-input>
            </el-form-item> 
          -->

        <el-form-item label="1">
          <el-input v-model="adminForm.name1"></el-input>
        </el-form-item>
        <el-form-item label="2">
          <el-input v-model="adminForm.name2"></el-input>
        </el-form-item>
        <el-form-item label="3">
          <el-input v-model="adminForm.name3"></el-input>
        </el-form-item>
        <el-form-item label="4">
          <el-input v-model="adminForm.name4"></el-input>
        </el-form-item>
        <el-form-item label="5">
          <el-input v-model="adminForm.name5"></el-input>
        </el-form-item>
        <el-form-item label="6">
          <el-input v-model="adminForm.name6"></el-input>
        </el-form-item>
        <el-form-item label="7">
          <el-input v-model="adminForm.name7"></el-input>
        </el-form-item>
        <el-form-item label="8">
          <el-input v-model="adminForm.name8"></el-input>
        </el-form-item>
        <el-form-item label="9">
          <el-input v-model="adminForm.name9"></el-input>
        </el-form-item>
        <el-form-item label="10">
          <el-input v-model="adminForm.name10"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "HomeAdmain",
  data() {
    return {
      adminForm: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        name8: "",
        name9: "",
        name10: "",
      },
      /*listdata: [
        {
          id: 1,
          name: "sss",
        },
        {
          id: 2,
          name: "sss",
        },
        {
          id: 16,
          name: "sss",
        },
        {
          id: 15,
          name: "sss",
        },
        {
          id: 41,
          name: "sss",
        },
        {
          id: 9,
          name: "sss",
        },
        {
          id: 198,
          name: "sss",
        },
        {
          id: 129,
          name: "sss",
        },
        {
          id: 139,
          name: "sss",
        },
        {
          id: 109,
          name: "sss",
        },
      ], */
    };
  },
  mounted() {
    api.recommend().then((res) => {
      var arr = res.data.list.splice(1, 10);
      var nameArr = [];
      for (let i = 0; i < arr.length; i++) {
        nameArr.push(arr[i].name);
      }
      this.adminForm.name1 = nameArr[0];
      this.adminForm.name2 = nameArr[1];
      this.adminForm.name3 = nameArr[2];
      this.adminForm.name4 = nameArr[3];
      this.adminForm.name5 = nameArr[4];
      this.adminForm.name6 = nameArr[5];
      this.adminForm.name7 = nameArr[6];
      this.adminForm.name8 = nameArr[7];
      this.adminForm.name9 = nameArr[8];
      this.adminForm.name10 = nameArr[9];
    });
  },
  methods: {
    //提交按钮
    submitForm() {
      this.$message({
        type: "success",
        message: "保存成功",
      });
    },
  },
};
</script>

<style scoped lang='less'>
.home-admin {
  margin-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
  h3 {
    padding: 10px 20px;
    text-align: left;
    background-color: #d7d7d7;
  }

  .box-card {
    width: 360px;
  }
}
</style>